<template>
  <FullPageModal v-model:visible="innerVisible" :custom-footer="true" :title="title" @open="open">
    <div class="w-px-1 mx-auto add-notifi">
      <DynamicForm ref="notifiIns" :model="model" :model-form-setting="modelFormSetting" :force-column="true" />
    </div>
    <template #footer>
      <a-button @click="handleCancelFn">{{ t("common.cancel") }}</a-button>
      <a-button type="primary" @click="ok">{{ t("common.ok") }}</a-button>
    </template>
  </FullPageModal>
</template>
<script lang="ts" setup>
import { useI18n } from "/@/locales/useI18n";
import { nextTick, ref, watch } from "vue";
import FullPageModal from "/@/components/FullPageModal.vue";
import { DynamicFormExpose, FormItemComponentType, FormItemData } from "/@/components/CURDDialog/models";
import { NotifiItem } from "/@/api/aiot/notifiManage/models";
import type { PartialNotifiItem } from "/@/api/aiot/notifiManage/models";
import {
  addNotifi,
  addPlatformNotifi,
  companyById,
  companyUpdate,
  platformById,
  platformUpdate,
} from "/@/api/aiot/notifiManage/index";
import { message } from "ant-design-vue";
import { getFrontDomText } from "/@/utils/dom";
const { t } = useI18n();
const props = withDefaults(
  defineProps<{
    visible: boolean;
    updateModel?: PartialNotifiItem;
    isAdd: boolean;
    isAiot: boolean;
  }>(),
  {
    isAdd: true,
  }
);

const emits = defineEmits(["update:visible", "ok"]);
const innerVisible = ref<boolean>(false);
const title = ref<string>(t("aiot.notifiManage.add"));
const notifiIns = ref<DynamicFormExpose>();
const model = ref<PartialNotifiItem>({
  title: "",
  sendState: "DRAFT",
  content: "",
});
watch(
  () => props.isAdd,
  (val) => {}
);
const modelFormSetting: FormItemData[] = [
  {
    key: "title",
    label: t("aiot.notifiManage.title"),
    required: true,
    max: 32,
  },
  {
    key: "sendState",
    label: t("aiot.notifiManage.sendState"),
    required: true,
    type: FormItemComponentType.RADIO,
    props: {
      options: [
        { label: "草稿", value: "DRAFT" },
        { label: "发布", value: "SENT" },
      ],
    },
  },
  {
    key: "content",
    label: t("aiot.notifiManage.content"),
    max: 10000,
    required: true,
    type: FormItemComponentType.EDITOR,
  },
  {
    key: "id",
    hide: true,
  },
];
watch(
  () => props.visible,
  async (v) => {
    innerVisible.value = v;

    if (!v) {
      reset();
    } else {
      if (!props.isAdd && props.updateModel) {
        title.value = t("aiot.notifiManage.edit");
        let mesDetail: PartialNotifiItem = {};
        if (props.isAiot) {
          mesDetail = (await platformById(props.updateModel.id || "")) || {};
        } else {
          mesDetail = (await companyById(props.updateModel.id || "")) || {};
        }
        model.value.title = mesDetail.title;
        model.value.sendState = mesDetail.sendState;
        model.value.content = mesDetail.content;
        model.value.id = mesDetail.id;
      } else if (props.isAdd) {
        title.value = t("aiot.notifiManage.add");
        reset();
      }
    }
  }
);
function reset() {
  if (notifiIns.value) {
    notifiIns.value.resetFields();
    model.value = {
      title: "",
      sendState: "DRAFT",
      content: "",
    };
  }
}
function open() {
  nextTick(() => {
    notifiIns.value?.initFormItemComponentData();
  });
}
function handleCancelFn() {
  emits("update:visible", false);
}
//第一次打开
let firstShow = true;
watch(innerVisible, (v) => {
  emits("update:visible", v);
  if (firstShow) {
    firstShow = false;
  }
});
function ok() {
  notifiIns.value?.validate().then(async () => {
    let req: boolean | null;
    if (getFrontDomText(model.value.content || "", 5000).length > 1000) {
      message.warning("公告内容最多可输入1000字符");
      return;
    }
    if (props.isAiot) {
      if (props.isAdd) {
        req = await addPlatformNotifi(model.value as NotifiItem);
      } else {
        req = await platformUpdate(model.value as NotifiItem);
      }
      if (req) {
        emits("ok");
        message.success("操作成功");
        // props.isAdd ? message.success("新增成功") : message.success("更新成功");
      }
    } else {
      if (props.isAdd) {
        req = await addNotifi(model.value as NotifiItem);
        // req = await addPlatformNotifi(model.value as NotifiItem);
      } else {
        req = await companyUpdate(model.value as NotifiItem);
      }
      if (req) {
        emits("ok");
        message.success("操作成功");
        // props.isAdd ? message.success("新增成功") : message.success("更新成功");
      }
    }
  });
}
</script>
